const n = `<!--
 * @Author: Quarter
 * @Date: 2023-06-30 17:22:19
 * @LastEditors: Quarter
 * @LastEditTime: 2024-12-13 11:42:45
 * @FilePath: /simple-ui/packages/documents/src/views/desktop/image-album/default-image-album.vue
 * @Description: 默认的图集示例
-->
<template>
  <s-form label-width="8em" colon="：">
    <s-form-item label="指示器位置">
      <s-radio-group
        v-model="options.indicatorPosition"
        :options="indicatorPositionOptions"
        :style="{ justifyContent: 'center' }"
      ></s-radio-group>
    </s-form-item>
    <s-form-item label="是否隐藏控制器">
      <s-radio-group
        v-model="options.withoutController"
        :options="[
          { label: '是', value: true },
          { label: '否', value: false },
        ]"
      ></s-radio-group>
    </s-form-item>
    <s-form-item label="是否隐藏指示器">
      <s-radio-group
        v-model="options.withoutIndicator"
        :options="[
          { label: '是', value: true },
          { label: '否', value: false },
        ]"
      ></s-radio-group>
    </s-form-item>
    <s-form-item label="图集示例">
      <s-image-album
        :indicator-position="options.indicatorPosition"
        :without-controller="options.withoutController"
        :without-indicator="options.withoutIndicator"
        :style="{ width: '50rem' }"
      >
        <s-image-album-item src="https://i.imgtg.com/2023/06/30/OkSo1Y.jpg"></s-image-album-item>
        <s-image-album-item src="https://i.imgtg.com/2023/06/30/OkSTxc.jpg"></s-image-album-item>
        <s-image-album-item src="https://i.imgtg.com/2023/06/30/OkSaMU.jpg"></s-image-album-item>
        <s-image-album-item src="https://i.imgtg.com/2023/06/30/OkSqHv.jpg"></s-image-album-item>
        <s-image-album-item src="https://i.imgtg.com/2023/06/30/OkS5Xq.jpg"></s-image-album-item>
      </s-image-album>
    </s-form-item>
  </s-form>
</template>

<script lang="ts">
import {
  IMAGE_ALBUM_INDICATOR_POSITION_DEFAULT,
  IMAGE_ALBUM_INDICATOR_POSITION_LABEL,
  IMAGE_ALBUM_INDICATOR_POSITION_OPTIONS,
} from "@smartcity/simple-ui-mobile";
import { Component, Vue } from "vue-property-decorator";

@Component({
  name: "DefaultImageAlbum",
})
export default class DefaultImageAlbum extends Vue {
  /**
   * @description: 指示器位置选项列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly indicatorPositionOptions = IMAGE_ALBUM_INDICATOR_POSITION_OPTIONS.map((variant) => ({
    label: \`指示器在\${IMAGE_ALBUM_INDICATOR_POSITION_LABEL.get(variant)}\`,
    value: variant,
  }));

  /**
   * @description: 组件配置项
   * @private
   * @type {Object}
   */
  options = {
    indicatorPosition: IMAGE_ALBUM_INDICATOR_POSITION_DEFAULT, // 指示器位置
    withoutController: false, // 是否隐藏控制器
    withoutIndicator: false, // 是否隐藏控制器
  };
}
<\/script>
`; export { n as default };
